<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
/* @var $this yii\web\View */
/* @var $searchModel app\models\GuideFieldDataQuery */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Guide Field Datas');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="guide-field-data-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php Pjax::begin(); ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            //['class' => 'yii\grid\SerialColumn'],

            [
                'attribute' => 'gid',
                'headerOptions' => ['width' => '100'],
            ],
            [
                'attribute' => 'type',
                'filter' => [
                    'collection' => 'collection',
                    'crossing' => 'crossing',
                    'encyclopedia' => 'encyclopedia',
                    'sight' => 'sight',
                ],
                'headerOptions' => ['width' => '130']
            ],
            [
                'attribute' => 'langcode',
                'filter' => [
                    'zh-hans',
                    'en'
                ],
                'headerOptions' => ['width' => '130']
            ],
            'title',
            //'subtitle',
            //'parent',
            //'parentGuide.title',
            [
                'label' => '价格',
                'format' => 'raw',
                'value' => function($model){
                    return '<input type="text" class="price" data-gid="'.$model->gid
                    .'" data-langcode="'.$model->langcode.'" value="'
                    .($model->price ? $model->price->price : '').'" />';
                }
            ],
            
            //'flag',
            //'body__value:ntext',
            //'body__summary:ntext',
            //'body__format',
            //'sound_body__target_id',
            //'sound_body__display',
            //'sound_body__description:ntext',
            //'route_body__value:ntext',
            //'route_body__summary:ntext',
            //'route_body__format',
            //'picture__target_id',
            //'picture__alt',
            //'picture__title',
            //'picture__width',
            //'picture__height',
            //'list_picture__target_id',
            //'list_picture__alt',
            //'list_picture__title',
            //'list_picture__width',
            //'list_picture__height',
            //'promote',
            //'longitude',
            //'latitude',
            //'map_zoom',
            //'ground_overlay__target_id',
            //'ground_overlay__alt',
            //'ground_overlay__title',
            //'ground_overlay__width',
            //'ground_overlay__height',
            //'ground_overlay_east',
            //'ground_overlay_north',
            //'ground_overlay_west',
            //'ground_overlay_south',
            //'show_point',
            //'show_nav',
            //'show_label',
            //'uid',
            //'status',
            //'created',
            //'changed',
            //'default_langcode',
            //'content_translation_source',
            //'content_translation_outdated',
            //'content_translation_uid',

            //['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    <?php Pjax::end(); ?>
</div>

<?php
$this->registerCss(<<<CSS
.price{
    width: 50px;
}
CSS
    );
    $url = \yii\helpers\Url::to(['guide/update-price']);
$this->registerJs(<<<JS
     $(document).on('change', '.price', function(){
        $(this).css('background', 'yellow');
        $(this).data('status', 'changed');
    });
    $(document).on('blur', '.price', function(){
        var o=$(this);
        if(o.data('status') === 'changed'){
            o.data('status', 'post');
            $.post('$url', {
                gid: o.attr('data-gid'),
                langcode: o.attr('data-langcode'),
                price: o.val()
            }, function(result){
                if(!!result.saved){
                    o.css('background', 'lightgreen');
                    o.data('status', 'updated');
                }else{
                    o.css('background', 'lightyellow');
                    o.data('status', 'changed');
                }
            }, 'json');
        }
    });
JS
);